<template>
  <li class="node list-item" data-type="0">
    <template v-if="root !==0 && nodes !== 1">
      <span class="line"></span>
    </template>
    <div class="contanier flex">
      <div class="small-panel flex">
        <span class="label">[负责人]</span>
        <span class="txt">{{model.ResponsibleName}}</span>
      </div>
      <div class="body-panel flex">
        <div class="title">
          <i v-if="HasChild" class="arrow" :class="isOpenOrClose" @click="openExpand(model)"></i>
          <i class="t-icon m-dep"></i>
          {{model.ObjectName}}
        </div>
        <div class="time">{{model.BelongTo}}天前</div>
      </div>
      <div class="bottom-panel flex">
        <div class="left-wrap flex">
          <span class="label">[工作经验]</span>
          |
          <span class="txt">{{model.Experience}}</span>
        </div>
        <div class="right-wrap">
          <span class="txt">{{model.CreateTime}}</span>
        </div>
      </div>
    </div>
    <template v-if="HasChild && this.model.isExpand">
      <ul class="box">
        <tree-item v-for="(m, i) in model.children" :key="String('child_node'+i)" :num='i' :root="1" @openExpand="openExpand" @delAction="delAction" :nodes.sync="model.children.length" :model.sync="m"></tree-item>
      </ul>
    </template>
  </li>
</template>

<script>
export default {
  name: 'treeItem',
  props: ['model', 'num', 'nodes', 'root'],
  data() {
    return {
      treeDataSource: []
    }
  },
  watch: {
    model: {
      handler() {
        console.log('监听子组件：', this.model)
      },
      deep: true
    }
  },
  computed: {
    HasChild() {
      return this.model.children.length > 0
    },
    isOpenOrClose() {
      return this.model.isExpand ? 'open' : 'close'
    }
  },
  methods: {
    openExpand(m) {
      console.log(m)
      // if (!m.HasChild) return
      this.$emit('openExpand', m)
    },
    //删除
    delAction(m) {
      this.$emit('delAction', m)
    }
  }
}
</script>

<style lang='less'>
.flex {
    display: flex;
    justify-content: flex-start;
}
.contanier {
    padding-left: 26px;
    padding-right: 10px;
    flex-direction: column;
    .small-panel {
        margin-top: 5px;
    }
    .small-panel,
    .bottom-panel {
        flex-direction: row;
        height: 20px;
        font-size: 8px;
        color: #333;
    }
    .body-panel {
        height: 24px;
        flex-direction: row;
        justify-content: space-between;
        .title {
            position: relative;
            .arrow {
                position: absolute;
                width: 0;
                height: 0;
                left: -13px;
                border-style: solid;
                z-index: 1;
                &.close {
                    border-width: 6px 0 6px 6px;
                    border-color: transparent transparent transparent #aaa;
                }
                &.open {
                    top: 4px;
                    border-width: 6px 6px 0;
                    border-color: #aaa transparent transparent;
                }
            }
        }
        .time {
            font-size: 14px;
            color: #ff853f;
        }
        .t-icon {
            display: inline-block;
            width: 14px;
            height: 18px;
            background-size: 100% 100% !important;
            vertical-align: middle;
            margin: -3px 2px 0 0;
            &.m-dep {
                background: url();
            }
        }
    }
}
</style>
